<template>
	<view>
		<Navbar :background="background" :backUrl="'mine'"></Navbar>
		<view class="point_header">
			<view class="header_point">
				<view class="header_point_title u-m-t-35">
					{{ userScore }}
				</view>
				<text class="header_point_tag u-m-t-10">能量值</text>
			</view>
		</view>
		<view class="">
			<view class="content u-m-b-30">
				<view class="u-m-l-40 u-m-r-40">
					<view class="content_header u-flex u-row-between">
						<text>能量值记录</text>
						<text @click="goAssist(16)">能量值说明</text>
					</view>
					<view class="u-border-gray-top u-flex u-row-between u-flex-wrap u-p-t-30 u-p-b-30"
						v-for="(item,index) in scoreList" :key="item.id">
						<view class="u-flex u-row-between" style="width: 100%;">
							<text class="content_name">{{item.title}}</text>
							<text class="content_point">{{item.integral}}</text>
						</view>
						<view class="u-flex u-row-between u-p-t-10" style="width: 100%;color:#999999;font-size: 24rpx;">
							<text class="content_time">{{ item.add_time }}</text>
							<text class="content_total">变动前能量值{{item.p_integral}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<Loadmore :status="status"></Loadmore>
		<Bottom :isReturn="true" :isReturnOramage="true"></Bottom>
	</view>
</template>

<script>
	import Navbar from '@/components/Navbar.vue'
	import Bottom from '@/components/Bottom.vue'
	import Loadmore from '@/components/Loadmore.vue'
	import { userInfo } from '@/network/api.js'
	import { teaEnergy } from '@/network/tea.js'
	import { formatDate } from '@/utils/index.js'
	import reachBottom from '@/mixins/reachBottom.js'
	export default{
		mixins:[reachBottom],
		components:{
			Navbar,
			Bottom,
			Loadmore
		},
		data(){
			return{
				background: {
					background: "linear-gradient(to right, #FB6518, #FB8530)"
				},
				backUrl: '/pages/mine/mine',
				scoreList:[],
				userScore:'',
				status: 'loadmore'
			}
		},
		onShow(){
			this.scoreList.length = 0
			this.handleGetUserInfo()
			this.handleGetUserCodeList()
		},
		methods:{
			handleGetUserInfo(){
				userInfo({user_id: uni.getStorageSync("user_id")}).then(res=>{
					this.userScore = res.data.number
				})
			},
			handleGetUserCodeList(){
				const params = {
					user_id: uni.getStorageSync("user_id"),
					page: this.page,
					limit: this.pageSize
				}
				teaEnergy(params).then(res=>{
					if(res.data.list.length > 0){
						res.data.list.map(item=>{
							this.scoreList.push(item)
						})
					}
					if(res.data.list.length < 10) this.status = 'nomore'
				})
			},
			goAssist(id) {
				uni.navigateTo({
					url: '/operate/agreement/agreement?type=' + id
				})
			},
			confirm(){
				/* uni.navigateTo({
					url: "/pages/scoreRecharge/scoreRecharge?score=" + this.userScore
				}) */
				uni.showToast({
					title: "暂未开放",
					icon: "none"
				})
			},
			loadData(){
				if(this.status == 'nomore')return
				this.page++
				this.status = 'loading'
				this.handleGetUserCodeList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.point_header{
		width: 100%;
		height: 250rpx;
		background-image: url("https://tea.oramage.com/upload/f0f3a2f40c444b6d31fa1ca27e7b1b64.png");
		background-size: cover;
		background-position-y: -157%;
		
		.header_point {
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		
			.header_point_title {
				font-size: 70rpx;
				font-weight: bold;
				color: #fff;
			}
		
			.header_point_tag {
				color: #E0E0E0;
			}
		}
	}
	
	.content {
		background: #fff;
		// height: calc(100vh - 184rpx - 160rpx);
	
		.content_header {
			padding: 40rpx 0rpx;
			font-size: 29rpx;
		}
	
		.content_name {
			color: #333333;
			font-weight: bold;
			font-size: 31rpx;
		}
	
		.content_point {
			font-size: 34rpx;
			color: #fb6316;
			font-weight: bold;
		}
	}
</style>